<template>
	<view class="custom-checkbox" @tap="handleToggle">
		<image class="checkbox-icon" :style="{ width: size + 'px', height: size + 'px' }"
			:src="modelValue ? checkedIcon : uncheckedIcon" />
		<view class="checkbox-content">
			<slot />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	const props = withDefaults(defineProps<{
		modelValue : boolean
		size ?: number
		disabled ?: boolean
		shape ?: 'circle' | 'square'
	}>(), {
		size: 18,
		disabled: false,
		shape: 'square'
	})

	const emit = defineEmits(['update:modelValue'])

	const checkedIcon = computed(() =>
		`/static/image/base/checkbox_checked_${props.shape}.png`
	)

	const uncheckedIcon = computed(() =>
		`/static/image/base/checkbox_unchecked_${props.shape}.png`
	)

	const handleToggle = () => {
		if (props.disabled) return
		emit('update:modelValue', !props.modelValue)
	}
</script>


<style scoped>
	.custom-checkbox {
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.checkbox-icon {
		display: flex;
		flex-shrink: 0;
		box-sizing: border-box;
	}

	.checkbox-content {
		display: flex;
		margin-left: 6px;
		font-size: 14px;
		color: #333;
		line-height: 1.6;
		box-sizing: border-box;
	}
</style>